<template>
  <div class="profile">
    <!-- <van-nav-bar title="" left-arrow @click-left="$router.back()" /> -->
    <!-- <van-icon name="arrow-left"  @click="goBack"/> -->
    <h2>
      <span class="s1" @click="goBack"> <van-icon name="arrow-left"/> </span>
    </h2>
    <div class="r1">
    <div class="row">
      <div class="label">头像:</div>
      <div class="avatar-container">
        <img class="avatar" :src="avatarUrl" alt="头像" />
      </div>
    </div>
    <div class="row">
      <div class="label">账号名:</div>
      <div class="value">{{ username }}</div>
    </div>
    <div class="row">
      <div class="label">昵称:</div>
      <div class="value">{{ nickname }}</div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: 'http://mms0.baidu.com/it/u=1945914686,2244543485&fm=253&app=120&f=JPEG?w=664&h=457',
      username: 'user',
      nickname: '小明',
    };
  },
  methods:{
     goBack() {
      
      this.$router.back(-1);
    },
  }
};
</script>

<style scoped>
.profile {
  padding: 20px;
  background: #f6f6f6;
  
}


.row {
  
  
  display: flex;
   justify-content: space-between;
  /* align-items: center; */
  margin-bottom: 10px;
}

.label {
  width: 80px;
  font-weight: bold;
}

.avatar-container {
  
  margin-right: 10px;
  margin-left: auto;
}

.avatar {
  
  width: 60px;
  height: 60px;
  border-radius: 50%;

}

.value {
  
  color: #333;
  margin-right: 23px;
 
}



</style>